<template>
  <div class='container'>
    <el-dialog
    v-loading="loading"
    title="题目预览"
    :visible="isShow"
    width="50%"
    @open="handleOpen"
    @close="handleClose"
    >
        <!-- 第一部分 -->
      <el-row style="margin-bottom:25px" :gutter="40">
            <el-col :span="6">
                <span>【题型】：{{ handleQuestionType (questionInfo.questionType) }}</span>
            </el-col>
            <el-col :span="6">
              <span>【编号】：{{ questionInfo.id }}</span>
            </el-col>
            <el-col :span="6">
              <span>【难度】：{{ handleDifficulty(questionInfo.difficulty) }}</span>
            </el-col>
            <el-col :span="6">
              <span>【标签】：{{ questionInfo.tags }}</span>
            </el-col>
        </el-row>
        <!-- 第二部分 -->
      <el-row style="margin-bottom:25px" :gutter="40">
            <el-col :span="6">
                <span>【学科】：{{ questionInfo.subjectName }}</span>
            </el-col>
            <el-col :span="6">
              <span>【目录】：{{ questionInfo.directoryName }}</span>
            </el-col>
            <el-col :span="6">
              <span>【方向】：{{ questionInfo.direction }}</span>
            </el-col>
        </el-row>
        <hr>
        <!-- 第三部分 -->
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple">
            <div>【题干】：</div>
              <p v-html="questionInfo.question" style="color:#0000ff"></p>
            </div>
          </el-col>
        </el-row>
        <!-- 第四部分 -->
        <!-- 如果是单选题 -->
        <el-row :gutter="20" v-if="questionInfo.questionType === '1'">
          <el-col :span="20">
            <p>单选题选题 选项：（以下选中的选项为正确答案）</p>
            <el-radio-group :value="correctOptions">
              <el-radio
              class="checkbox"
              v-for="item in questionInfo.options"
              :key="item.id"
              :label="item.code"
              >
              {{ item.title }}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <!-- 如果是多选题 -->
        <el-row :gutter="20" v-else-if="questionInfo.questionType=== '2'">
          <el-col :span="20">
            <p>多选题 选项：（以下选中的选项为正确答案）</p>
            <el-checkbox-group :value="correctOptions">
              <el-checkbox
              class="checkbox"
              v-for="item in questionInfo.options"
              :key="item.id"
              :label="item.code"
              >
              {{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <hr>
        <!-- 下部分 -->
        <div>
          <el-row :gutter="20">
              【参考答案】：
              <el-button  type="danger" size="small" @click="showVideo = !showVideo">视频答案预览</el-button>
              <div v-show="showVideo">
                  <video
                  :src="questionInfo.videoURL"
                  v-if="questionInfo.videoURL"
                  style="margin-top:15px;width:300px;height:200px"
                  controls
                  >
                  </video>
                  <span v-else>此答案无相关视频</span>
              </div>
              <hr>
              <div>
                <el-row type="flex" align="middle">
                  <span>【答案解析】：</span>
                  <span v-html="questionInfo.answer"></span>
                </el-row>
                <hr>
                <p>【题目备注】：{{ questionInfo.remarks }}</p>
              </div>
          </el-row>
        </div>
        <template #footer>
          <el-button size="small" type="primary" @click="handleClose">关闭</el-button>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questionPreview',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    // 点击预览时传入当前试题的id
    questionId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      // 题目详情
      questionInfo: {},
      // 答案解析视频是否显示
      showVideo: false,
      loading: false
    }
  },
  computed: {
    correctOptions () {
      const arr = this.questionInfo.options.filter(item => item.isRight)
      if (arr.length > 1) {
        // 多选题的正确选项(Array)
        return arr.map(item => item.code)
      } else if (arr.length === 1) {
        // 单选题的正确选项(str)
        return arr[0].code
      } else {
        return null
      }
    }
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('update:isShow', false)
    },
    // 打开弹框时获取试题详情
    async handleOpen () {
      this.loading = true
      const res = await detail({ id: this.questionId, isNext: false })
      // console.log(res)
      this.questionInfo = res.data
      this.loading = false
    },

    // 题型数据处理函数
    handleQuestionType (n) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[n]
    },
    // 难度数据处理函数
    handleDifficulty (n) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[n]
    }
  }
}
</script>

<style scoped lang='scss'>
.checkbox {
  display: block;
  line-height: 1.5;
  font-size: 20px;
}
</style>
